<template>
  <div class="Info">
    <mt-header title="修改昵称">
      <mt-button icon="back" slot="left" @click="goBackInfo">返回</mt-button>
    </mt-header>
    <group>
      <x-input type="text" v-model="nick" class="input" :show-clear="true" placeholder="请输入昵称" required></x-input>
      <x-button type="primary" class="submit" :disabled="!nick" @click.native="changeNick">提交</x-button>
    </group>
    <toast v-model="inputValue" type="text" :time="1000" is-show-mask text="用户名重复" :position="position" width="15rem">{{ $t('Basic Usage') }}</toast>
  </div>

</template>

<script>
  import {
    Panel,
    Group,
    XInput,
    XButton
  } from "vux";

  export default {
    components: {
      Group,
      XInput,
      XButton
    },

    data() {
      return {
        value14: "Hello World",
        position: "middle",
        inputValue: false,
        nick: '',
        userId: sessionStorage.getItem("id")
      };
    },
    methods: {
      show() {
        this.$refs.input1.blur();
      },
      changeNick: function () {
        let data = {
          nickName: this.nick
        }
        this.$http
          .put('http://122.152.216.183:8092/students/' + this.userId + '/nickname', JSON.stringify(data))
          .then(response => {
            this.$router.push({
              path: '/IDcard/Info'
            })
          })
      }


    }
  };

</script>

<style lang="scss">
  .input {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 2rem;
  }

  .submit {
    width: 50% !important;
    margin-bottom: 2rem;
  }

</style>
